<template>
  <div class="tabbarItem" @click="tabbarItemClick" :class="{selected:isSelected()}">
    <div class="tabbarItemImg textAlignCenter">
      <div v-show="!isSelected()">
        <slot name="tabbarItemImgNormal"></slot>
      </div>
      <div v-show="isSelected()">
        <slot name="tabbarItemImgSelected"></slot>
      </div>
    </div>
    <div class="tabbarItemText textAlignCenter">
      <slot name="tabbarItemText">首页</slot>
    </div>
  </div>
</template>

<script>

export default {
name: "tabbarItem",
  data(){
    return{

    }
  },
  props: {
    link: {
      type: String,
      required: true
    },

  },
  methods: {
    tabbarItemClick() {
      // console.log(this.$route);
      // this.$router.replace(this.link);
        this.$router.push(
            {path: this.link},
            onComplete => {},
            onAbort => {}
        )
    },
    isSelected(){
      return  this.$route.path===this.link;
    }
  }
}
</script>

<style scoped>
.tabbarItem{
  padding: .5rem;
}
.tabbarItemImg img{
  width: 2rem;
  height: 2rem;
}
.selected{
  color: #DD001B;
}
</style>